<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库教学系统原型</title>
    <link rel="stylesheet" href="/src/style.css">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>

<body class="bg-gray-100 p-8">
    <div class="max-w-7xl mx-auto space-y-8">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">数据库教学系统原型界面</h1>

        <!-- 登录页面 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/login.html</div>
            </div>
            <iframe src="/src/pages/login.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 学生端页面预览 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/student/dashboard.html</div>
            </div>
            <iframe src="/src/pages/student/dashboard.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/student/lab.html</div>
            </div>
            <iframe src="/src/pages/student/lab.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/student/assignments.html</div>
            </div>
            <iframe src="/src/pages/student/assignments.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 主页/仪表盘 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/dashboard.html</div>
            </div>
            <iframe src="/src/pages/dashboard.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 课程列表页面 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/courses.html</div>
            </div>
            <iframe src="/src/pages/courses.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 实验环境页面 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/lab.html</div>
            </div>
            <iframe src="/src/pages/lab.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 作业管理页面 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/assignments.html</div>
            </div>
            <iframe src="/src/pages/assignments.html" class="w-full h-[600px] border-0"></iframe>
        </div>

        <!-- 个人资料页面 -->
        <div class="browser-window">
            <div class="browser-header">
                <div class="browser-controls">
                    <div class="browser-dot browser-dot-red"></div>
                    <div class="browser-dot browser-dot-yellow"></div>
                    <div class="browser-dot browser-dot-green"></div>
                </div>
                <div class="browser-address-bar">http://localhost:3000/profile.html</div>
            </div>
            <iframe src="/src/pages/profile.html" class="w-full h-[600px] border-0"></iframe>
        </div>
    </div>

    <script type="module" src="/src/main.js"></script>
</body>

</html>